<script lang="ts" setup>
import { defineEmits, defineProps } from "vue"

defineProps<{
  isAllCheckedStatus: boolean
}>()

const Emit = defineEmits<{
  (e: "allCheckStatusChangeEvent"): void
  (e: "removeAllCheckedTodoEvent"): void
}>()

const allCheckStatusChange = () => {
  Emit("allCheckStatusChangeEvent")
}
const removeAllCheckedTodo = () => {
  Emit("removeAllCheckedTodoEvent")
}
</script>

<template>
  <div class="bottom">
    <div>
      <input
        type="checkbox"
        name="allCheck"
        id="allCheck"
        value="allCheck"
        :checked="isAllCheckedStatus"
        @change="allCheckStatusChange"
      />
      <label for="allCheck">全选</label>
    </div>
    <button @click="removeAllCheckedTodo">删除</button>
  </div>
</template>

<style scoped>
.bottom {
  display: flex;
  margin-top: 30px;
  user-select: none;
}
button {
  margin-left: 50px;
}
</style>
